<template>
  <div class="photoinfo-container">
    <h3>{{photoInfo.title}}</h3>
    <p class="subtitle">
      <span>发表时间：{{photoInfo.add_time|dateFormat}} </span>
      <span>点击：{{photoInfo.click}} 次</span>
    </p>

    <hr />

    <!-- 缩略图区域 -->
    <div class="images" v-viewer="{movable: false}">
      <img v-for="item in images" :src="item.src" :key="item.src">
      <!-- <img v-for="src in images" :src="src" :key="src"> -->
    </div>
    <!-- 图片内容区域 -->
    <div class="content" v-html="photoInfo.content">
    </div>
    <!-- 放置一个评论子组件 -->
    <comment-box :id="id"></comment-box>
  </div>
</template>

<script>
import Comment from "../subcomponents/comment.vue";
export default {
  data() {
    return {
        id:this.$route.params.id, //路由中获取id
        photoInfo:{}, //图片详情
        // images: [
        //     // 必须加上 src ？？？
        //     'src/images/gg2.jpg',
        //     '../../src/images/gg3.jpg',
        //     '../../src/images/gg7.jpg',
        //     '../../src/images/gg10.jpg',
        //     '../../src/images/gg5.jpg',
        //     ],
        images:[],
        
    };
  },
  created() {
      this.getPhotoInfo();
      this.getThumImages();
  },
  methods: {
      getPhotoInfo(){
          this.$http.get("api/getimageInfo/"+this.id).then(result=>{
              if(result.body.status===0){
                //   获取到的 message 是一个数组（只有一个元素）
                  this.photoInfo=result.body.message[0];
                //   console.log(result.body.message[0])
              }
          })
      },
      getThumImages(){
          this.$http.get("api/getthumimages/"+this.id).then(result=>{
              if(result.body.status===0){
                this.images=result.body.message;
                // console.log(result.body);
              }
          })
      }
  },
  components: {
    "comment-box": Comment
  }
};
</script>

<style lang="scss" scoped>
.photoinfo-container{
    padding: 5px;
    h3{
        color: #26a2ff;
        font-size:17px;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
    }
    .content{
        font-size: 15px;
        line-height: 30px;
    }
    .images img{
        width:110px;
        height: 110px;
        margin: 5px;
    }
}
</style>